<template>
  <div class="drawerReflect">
    <el-drawer :visible="drawerReflectBoolen"
               title="提现审核"
               size="60%"
               :before-close="handleClose"
               ref="drawer">
      <!-- 评论列表 -->
      <el-form label-position="top"
               :model="form"
               ref="form"
               class="ruleForm">

        <div class="reflectList">

          <img class="avaterImg"
               :src=drawerReflect?.avatar
               alt="">
          <div class="commentInfo flex-column-between ">
            <div class="nickName">
              <span style="color: #000;font-weight: 400;">{{ drawerReflect?.nickname }}</span>

            </div>
            <div class="rate">
              <el-tag type="success"
                      v-if="drawerReflect?.status==1"
                      size="small">提现中</el-tag>
              <el-tag type="success"
                      v-if="drawerReflect?.status==2"
                      size="small">提现完成</el-tag>
              <el-tag type="success"
                      v-if="drawerReflect?.status==3"
                      size="small">已驳回</el-tag>
            </div>
          </div>
        </div>
        <!-- 体现展示信息 -->
        <div class="padding20">
          <div class="flex-start">

            <div class="display">
              <div class="reflectListLeft">
                <div>提现金额</div>
                <div>申请时间</div>
                <div>订单编号</div>
                <div>提现状态</div>
                <div v-show="showRemark">驳回原因</div>
              </div>
              <div :class="[form.examineStatus=='2'?'flex-column-between reflectListRight  reflectRight':'flex-column-between reflectListRight']">
                <div style="color:red">￥{{ drawerReflect?.withdrawAmount }}</div>
                <div>{{ drawerReflect?.createdAt }}</div>
                <div>{{ drawerReflect?.withdrawOrderNumber }}</div>
                <div>
                  <el-radio-group v-model="form.examineStatus">
                    <el-radio label="1"
                              @change="remarkFn"
                              value="1">同意</el-radio>
                    <el-radio label="2"
                              value="2"
                              @change="remarkFn">驳回</el-radio>
                  </el-radio-group>

                </div>
                <el-input maxlength="100"
                          v-show="showRemark"
                          show-word-limit
                          placeholder="请输入驳回原因"
                          v-model="form.remark"></el-input>
              </div>
            </div>
            <div class="display ">
              <div class="reflectListLeft">
                <div>到账金额</div>
                <div>手续费</div>
                <div>提现方式</div>
                <div>提现账户</div>

              </div>
              <div class="flex-column-between reflectListRight">
                <div>￥{{drawerReflect?.withdrawActualAmount }}</div>
                <div>￥{{  drawerReflect?.serviceCharge}}</div>
                <div :class="[drawerReflect?.enabledNot==1 ? 'payZfbIcon' : 'payWxIcon']"> {{ drawerReflect?.enabledNot==1?'支付宝支付':'微信支付' }}</div>
                <div>{{drawerReflect?.withdrawAccount?drawerReflect?.withdrawAccount:'----' }}</div>
              </div>
            </div>
          </div>
          <!-- 佣金来源 -->
          <!-- <commissionSource :withdrawalRecordsId=drawerReflect.id></commissionSource> -->
        </div>

      </el-form>
      <div class="drawer__footer">
        <el-button round
                   type="plain"
                   @click="handleClose"
                   size="medium">返回</el-button>
        <el-button type="primary"
                   round
                   size="medium"
                   @click="save">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>
  <script>

import { technicianWithdrawal } from '@/api/withdrawalManagement/withdrawalList/index'
// import commissionSource from './commissionSource.vue'
export default {
  name: 'drawerReflect',
  props: {
    drawerReflectBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object
  },
  components: {
    // 佣金来源
    // commissionSource
  },

  data () {
    return {
      isUpdate: false,
      drawerReflect: null,
      showRemark: false,
      form: {
        // 提现状态 1 同意 2 不同意
        examineStatus: '1',
        remark: null,
        siteId: this.$store.state.site.info.id,
        id: null,
        withdrawAmount: null,
        userId: this.$store.state.user.info.userId,
      }
    };
  },
  methods: {


    // 关闭抽屉
    handleClose () {
      console.log('评论')
      this.$emit('update:drawerReflectBoolen', false);
    },
    // 驳回回调
    remarkFn (val) {
      console.log(val)

      if (val == 2) {
        this.showRemark = true
      } else {
        this.showRemark = false
      }

    },
    save () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }
        const data = {
          ...this.form
        };
        console.log(data)
        if (this.form.examineStatus == 1) {
          data.withdrawAmount = this.drawerReflect.withdrawAmount
        } else {
          data.userId = null
          data.siteId = null
        }

        this.loading = true;


        technicianWithdrawal(data)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg);
            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    }
  },
  watch: {
    drawerReflectBoolen (visible) {
      this.$nextTick(() => {
        if (visible) {
          console.log(this.data);
          if (this.data) {
            this.form.id = this.data.id
            this.drawerReflect = this.data
            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$nextTick(() => {
            this.$refs['form'].resetFields();
            console.log(this.form);
          });
        }
      });
    }
  }
};

  </script>
  <style lang="less">
.drawer__footer {
  display: flex;
  justify-content: space-around;
}
.drawerReflect {
  .reflectList {
    display: flex;
    padding: 14px 0;
    border-bottom: 1px solid #d9d9d9;
    margin: 0 20px;
    .avaterImg {
      width: 50px;
      height: 50px;
      border-radius: 46px;
      margin-right: 10px;
    }
    .commentInfo {
      width: 100%;
    }
  }
  .padding20 {
    padding: 20px;
    .reflectListLeft {
      padding: 0px 0 20px 0px;
      div {
        margin-bottom: 22px;
      }
    }
    .reflectRight {
      margin-bottom: 0px !important ;
    }
    .reflectListRight {
      padding: 0px 0 20px 20px;
      margin-bottom: 22px;
      margin-right: 50px;
      .payZfbIcon {
        &::before {
          content: '';
          background-image: url('../../../../assets/Group\ 3170.png');

          background-repeat: no-repeat;
          background-size: contain;
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          margin-right: 2px;
          border-radius: 50%;
        }
      }
      .payWxIcon {
        &::before {
          content: '';
          background-image: url('../../../../assets/Group\ 3171.png');

          background-repeat: no-repeat;
          background-size: contain;
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          margin-right: 2px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>